import React from 'react';
import ReactDOM from 'react-dom';

/**
 * @description: 可以通过 函数定义组件
 * 函数组件其实就是一个接受属性对象 并返回一个React函数
 * 组件名称必须是大写字母,元素原生span h1是以小写字母开头的，自定义组件是以大写字母开头
 * 组件必须先定义再使用
 * 组件必须返回唯一的根元素，并且只能返回一个唯一的根元素 JSX expression must have one parent element
 * 组件返回的可能是一个原生组件元素 也可以是另外一个函数的组件的元素
 * 组件可以接受属性对象 用来计算返回的元素 vue{{msg}} 如果想取变量的值显示在此处，就可以使用{}
 * 
 * 
 * @param {*} params
 * @return {*}
 */
// function FunctionComponent(props) {
//   let elememt = React.createElement('h1',{
//     className:'title',
//     style:{
//       color:'red',
//     }
//   },'hello',React.createElement('span',null,world))
//   return elememt;
// }


/**
 * @description: 也可以通过类定义组件
 * 类组件的渲染：先通过属性对象创建类组件的实例，调用实例的render方法返回一个React实例
 * @param {*}
 * @return {*}
 */
class ClassComponent extends React.Component{
   render(){
       return <div className="title" style={{ color: 'red' }}><span>{this.props.name}</span>{this.props.children}</div>;
    }
}
let element = <ClassComponent name="hello">world</ClassComponent>;
ReactDOM.render(element, document.getElementById("root"));

class Calculate extends React.Component{
  constructor(props){
    super(props);
    this.aRef = React.createRef();
    this.bRef = React.createRef();
  }
  handleAdd = () =>{
    let a = this.aRef.current.value;
  }
  render(){
    //如果给一个原生组件添加一个ref属性 那么当此原生虚拟DOM组件变成真实DOM之后，会把真实的DOM元素赋给this.aRef.current
    return(
      <div>
        <input ref={this.aRef} />+<input/><button></button>
      </div>
    )
  }
}
//React.createElement会返回一个React元素
//React元素其实就是一个普通的JS对象，它描述了你将要看到的内容，也就是常说的虚拟dom
let element2 = React.createElement(
  "h1",
  {
    className: "title",
    style: {
      color: "red",
    },
  },
  "hello",React.createElement("span", null, "world")
);

console.log(JSON.stringify(element2,null,2));

//ReactDOM.render 负责渲染 把React元素（虚拟dom 普通js对象）渲染到DOM容器内
ReactDOM.render(
  <h1 className="title" style={{ color: "red" }}>
    hello
  </h1>,
  document.getElementById("root")
);

